<template>
  <q-card flat>
    <q-item dense class="q-px-sm">
      <q-item-section>
        <div class="row items-center">
          <div>
            <q-icon size="24px" color="red-3" name="fa-solid fa-fire"></q-icon>
          </div>
          <div class="q-pl-sm">文章热榜</div>
        </div>
      </q-item-section>

      <q-item-section class="col-auto">
        <q-btn dense round flat icon="arrow_forward" to="/ranking/readArticle" />
      </q-item-section>
    </q-item>

    <q-separator />
    <q-item
      clickable
      dense
      class="q-px-sm"
      :to="{
        path: '/blog/' + item.id,
      }"
      v-for="(item, index) in rows"
      :key="item.id"
    >
      <q-item-section>
        <div class="row items-center">
          <q-icon :class="'text-red-' + (9 - index)" :name="'fa-solid fa-' + (index + 1)" />
          <div class="q-pl-sm col line-clamp-1">{{ item.content }}</div>
          <div class="q-pl-sm">
            <q-chip class="text-red-4" dense>
              <q-icon name="fa-solid fa-fire" />
              <span>{{ item.readNum }}</span>
            </q-chip>
          </div>
        </div>
      </q-item-section>
    </q-item>
  </q-card>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { mainHotArticle } from 'src/service/api'
import { onActivated, onMounted, ref } from 'vue'

const rows = ref<ApiType<typeof mainHotArticle>['Return']>([])

const f5 = async () => {
  const { data, error } = await mainHotArticle()
  if (error) {
    return
  }
  rows.value = data
}
onMounted(() => {
  f5()
})

onActivated(() => {
  f5()
})
</script>

<style scoped></style>
